<template>
  <div class="create-order-outer-outer">
    <a-spin :spinning="state.isRefreshing||orderInfo==null" style="width: 100%" size="large">
      <div class="create-order-outer" v-if="orderInfo!=null">
        <div class="title-font">
          List of Goods
        </div>
        <div class="create-order-list-outer">
          <a-table :columns="columns"  :data-source="orderInfo.goods!=null?orderInfo.goods:[]" bordered size="small" class="show-min-768px"  :pagination="false">
            <template #name="{ text,record }">
              <div style="display: flex;flex-direction: row;">
                <div><img :src="record.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px"></div>
                <div class="basic-font" style="margin-left: 10px;word-wrap: break-word;white-space: normal">
                  {{ record.good.name }}
                  <div>
                    <div style="color: #646266;font-size: 12px;" v-if="record.good.specification.specification!=null">
                      <div v-for="specification in record.good.specification.specification"
                           style="line-height: 1.1;padding:5px 0;box-sizing: border-box">
                          <div
                              style="display:inline-block;background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box;word-wrap: break-word;white-space: normal;">
                            {{ specification.key }} :  {{ specification.value }}
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template #footer>
              <div style="display: flex;justify-content: flex-end;">

                <div style="display: inline-block;">

                  <table>
                    <tbody>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total goods price：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total Shipping Cost：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </template>
          </a-table>
          <a-list :bordered="true" :dataSource="orderInfo.goods!=null?orderInfo.goods:[]" size="small" class="show-max-768px">
            <template #renderItem="{ item }">
              <a-list-item style="justify-content: flex-end;">
                <div style="display: flex;flex-direction: row;flex:auto">
                  <div>
                    <img :src="item.good.mainImage" style="width: 70px;height: 70px;border-radius: 10px">
                  </div>
                  <div>
                    <div>
                      <div class="basic-font" style="margin-left: 10px;">
                        {{ item.good.name }}
                      </div>
                      <div v-for="specification in item.good.specification.specification"
                           style="line-height: 1.1;padding:5px;box-sizing: border-box">
                        <div style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box;">
                            <span style="font-size: 12px;">
                                        {{ specification.key }} :  {{ specification.value }}
                                      </span>
                        </div>

                      </div>
                    </div>
                    <!--                      <div>-->
                    <!--                        <div class="basic-font" style="font-size: 14px;margin-left: 10px;color: #777777" v-if="orderInfo.state>1">-->
                    <!--                          订单编号：-->
                    <!--                          <span  class="basic-font" style="font-size: 14px;color: #777777"  v-if="item.deliveryNumber!=null">-->
                    <!--                            {{item.deliveryBusiness==null||item.deliveryBusiness.trim().length==0?'未知快递商':item.deliveryBusiness.trim()}} | {{item.deliveryNumber}}-->

                    <!--                          </span>-->

                    <!--                          <span  class="basic-font" style="font-size: 14px;color: #777777"  v-else>-->
                    <!--                            {{'尚未发货'}}-->
                    <!--                        </span>-->
                    <!--                          </div>-->
                    <!--                      </div>-->
                  </div>
                </div>

                <template #actions>
                  <div class="basic-font" style="color: black;font-size: 16px">
                    {{ item.price == null || item.price <= 0 ? 'FREE' : ('$' + item.price) }} &nbsp;<span
                      style="font-size: 12px;">✖</span>&nbsp;
                    {{ item.number }}
                  </div>
                </template>
              </a-list-item>
            </template>
            <template #footer>
              <a-list-item>
                <span></span>
                <template #actions>
                  <table>
                    <tbody>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total goods price：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.goodsPrice <= 0 ? 'FREE' : ('$' + orderInfo.goodsPrice) }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total Shipping Cost：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.freightPrice <= 0 ? 'FREE' : ('$' + orderInfo.freightPrice) }}
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align: right">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          Total：
                        </div>
                      </td>
                      <td style="text-align: left">
                        <div class="basic-font" style="color: black;font-size: 16px">
                          {{ orderInfo.totalPrice <= 0 ? 'FREE' : ('$' + orderInfo.totalPrice) }}
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </div>
        <div class="create-order-action-outer">
          <div class="title-font" style="font-size: 16px;margin-top: 10px">
            Please Select Address
            <basic-button style="border: 1px solid #1677ff" @click="state.showSelectAddressModal=true"><span
                style="font-weight: normal;padding: 7px">Select</span></basic-button>
          </div>
          <div>
            <a-row align="top">
              <a-col :xs="24" >
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    Country
                  </div>
                  <div class="form-item-input">
                    <a-select
                        :value="addressInfo.country"
                        :options="countries"
                        style="width: 100%;border-color:  #bbbbbf;border-radius: 6px;"
                    >
                      <a-select-option :value="country.value" v-for="country in countries">{{country.label}}</a-select-option>
                    </a-select>
<!--                    <basic-input v-model="addressInfo.country"></basic-input>-->
                  </div>
                </div>
              </a-col>
              <a-col :xs="24" >
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    Full name
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.recipients"></basic-input>
                  </div>
                </div>
              </a-col>


              <a-col flex="100%">
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    Street address
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.address" placeholder="Street address,P.O.box,company name, c/o"></basic-input>
                    <basic-input v-model="addressInfo.others" v-if="showExtra" placeholder="Apartment,suite, unit, building,floor, etc." style="margin-top: 5px;"></basic-input>
                    <div v-if="!showExtra" style="color: #81B2B9;font-size: 13px;cursor: pointer;font-weight: 600" @click="showExtra=true"><PlusOutlined /> Add a line</div>
                  </div>
                </div>
              </a-col>

              <a-col flex="100%">
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    City
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.newCity" ></basic-input>
                    </div>
                </div>
              </a-col>



              <a-col :xs="24" :sm="12">
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    State / Province
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.province"></basic-input>
                  </div>
                </div>
              </a-col>



              <a-col :xs="24" :sm="12">
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    ZIP / Postal code
                  </div>
                  <div class="form-item-input" >
                    <basic-input v-model="addressInfo.city"></basic-input>
                  </div>
                </div>
              </a-col>
              <a-col span="24">
                <h4 style="margin: 5px 0;">
                  Customer Contact Information
                </h4>
              </a-col>
              <a-col :xs="24" :sm="12">
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    Phone number
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.phone"></basic-input>
                  </div>
                  <div
                      class="form-item-label">
                    Optional
                  </div>
                </div>
              </a-col>
              <a-col :xs="24" :sm="12">
                <!--                :md="8" :lg="6"-->
                <div class="form-item-outer">
                  <div
                      class="form-item-label">
                    Email address
                  </div>
                  <div class="form-item-input">
                    <basic-input v-model="addressInfo.email"></basic-input>
                  </div>
<!--                  <div-->
<!--                      class="form-item-label">-->
<!--                    Optional-->
<!--                  </div>-->
                </div>
              </a-col>
              <!--              <a-col :xs="24" :sm="12" :md="8" :lg="6" >-->
              <!--                <div  class="form-item-outer">-->
              <!--                  <div style="flex: 0 0 80px;display: flex;align-items: center;margin-right: 10px;justify-content: flex-end;">区</div>-->
              <!--                  <div class="form-item-input">-->
              <!--                    <basic-input v-model="addressInfo.district"></basic-input>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </a-col>-->
            </a-row>
          </div>
        </div>
        <div style="display: flex;flex-direction: row;margin-bottom: 20px;" class="submit-order-submit-button-outer">
          <div class="submit-order-submit-button">
            <basic-button @click="toSubmitOrder" :inverse-color="true"
                          style="padding: 10px 15px;width: 200px;text-align: center">
              <span style="font-size: 18px;">
                Place Order
              </span>

            </basic-button>
          </div>
        </div>
      </div>
      <div v-else>
        <a-skeleton :loading="state.isRefreshing||orderInfo==null">
        </a-skeleton>
      </div>
    </a-spin>
    <a-modal :ok-button-props="{style:{ display: 'none' }}" v-model:visible="state.showSelectAddressModal" width="100%"
             wrapClassName="full-modal" :closable="false" @cancel="state.showSelectAddressModal=false">
      <template #title>
        <div class="title-font">
          Click To Select
        </div>
      </template>
      <div v-if="addressList!=null" style="height: 100%;max-height: 100%;overflow-x: auto;">
        <div class="submit-order-address-list-outer">
          <a-row style="justify-content: stretch">
            <a-col v-for="address in addressList" :xs="24" :sm="12" :md="8" :lg="6" :xxl="4">
              <div class="submit-order-address-outer">
                <div class="submit-order-address selection">
                  <div style="display: flex;flex-direction: column;justify-content: stretch;">
                    <div style="display: flex;flex-direction: row;justify-content: space-between;">
                      <div style="display: flex;flex-direction: column;justify-content: center;font-weight: bold">
                        {{ address.title == null ? 'Unnamed Address' : address.title }}
                      </div>
                      <div>
                        <basic-button style="border:1px solid #1677ff;padding:7px;" @click="toSelectAddress(address)">
                          Select
                        </basic-button>
                      </div>
                    </div>
                    <div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.recipients == null ? 'Unnamed' : address.recipients }}&nbsp;&nbsp;
                      </div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.phone }}&nbsp;&nbsp;
                      </div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.email == null ? '' : ('' + address.email) }}
                      </div>
                    </div>
                    <div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.country == null ? 'Unknown country' : address.country }}&nbsp;&nbsp;
                      </div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.province == null ? 'Unknown Province' : address.province }}&nbsp;&nbsp;
                      </div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.city == null ? 'Unknown ZIP / Postal code' : address.city }}&nbsp;&nbsp;
                      </div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.newCity == null ? 'Unknown City ' : address.newCity }}&nbsp;&nbsp;
                      </div>
                    </div>
                    <div>
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.address == null ? 'Unknown Address' : address.address }}
                      </div>
                    </div>
                    <div v-if="address.others!=null&&address.others!==''">
                      <div class="basic-font" style="color:#5f5f5f;font-size: 13px;line-height: 1.2">
                        {{ address.others }}
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </a-col>
          </a-row>
          <!--          <div class="submit-order-address-outer selection">-->
          <!--            <a-descriptions :title="address.title==null?'未命名地址':address.title" size="small">-->
          <!--              <template #extra>-->
          <!--                <basic-button style="border-color: #1677ff">Select</basic-button>-->
          <!--              </template>-->
          <!--              <a-descriptions-item label="Country">{{ address.country }}</a-descriptions-item>-->
          <!--              <a-descriptions-item label="Province">{{ address.province }}</a-descriptions-item>-->
          <!--              <a-descriptions-item label="District">{{ address.district }}</a-descriptions-item>-->
          <!--              <a-descriptions-item label="Phone">{{ address.phone }}</a-descriptions-item>-->
          <!--              <a-descriptions-item label="Email">{{ address.email }}</a-descriptions-item>-->
          <!--            </a-descriptions>-->
          <!--          </div>-->
        </div>
      </div>
    </a-modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {createOrder, payOrder, postOrder} from "../../../api/OrderActionRequest";
import BasicButton from "../../../components/button/basicButton.vue";
import {AddressType, searchAddress} from '../../../api/AddressRequest';
import BasicInput from "../../../components/input/basicInput.vue";
import {Modal, notification} from "ant-design-vue";
import {PlusOutlined} from '@ant-design/icons-vue'
const columns=[
  {
    slots: { customRender: 'name' },
    title:'Name'
  },
  {
    dataIndex:'number',
    title:'Quantity',
    width:'85px'
  },
  {
    dataIndex:'price',
    title:'Price',
    customRender({text}){
      return text==null||text==0?'FREE':('$ '+text)
    },
    width:'60px'
  },
]

const countries=[
  {
    value:'United States',
    label:'United States',
    imgUrl:''
  }
]

export default defineComponent({
  components: {BasicInput, BasicButton,PlusOutlined},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      isRefreshing: false,
      showSelectAddressModal: false,
      good: null
    })
    const orderInfo = ref(null);
    const showExtra=ref(false);
    const refreshOrderInfo = async () => {
      if (state.isRefreshing == true) return;
      state.isRefreshing = true;
      await createOrder(goodInfo.value).then((res) => {
        res.data.result.goods = JSON.parse(res.data.result.goods)
        if (res.data.result != undefined && res.data.result.goods != null) {
          for (let i = 0; i < res.data.result.goods.length; i++) {
            //@ts-ignored
            res.data.result.goods[i].good.specification.specification = JSON.parse(res.data.result.goods[i].good.specification.specification)
          }
        }
        orderInfo.value = res.data.result;
        console.log(orderInfo.value)
      }).finally(() => {
        state.isRefreshing = false;
      })
    }

    const addressInfo = reactive({
      country: 'United States',
      province: '',
      city: '',
      newCity: '',
      district: '',
      address: '',
      phone: '',
      email: '',
      recipients: '',
      others: ''
    })

    const goodInfo = ref<any>(null);

    const addressList = ref<any[]>([]);

    onMounted(() => {

      if (route.query != null ) {
        goodInfo.value = JSON.parse(JSON.stringify(route.query));
      }

      if(goodInfo.value.cartIds!=null&& typeof goodInfo.value.cartIds==='string'){
        goodInfo.value.cartIds=[goodInfo.value.cartIds]
      }

      searchAddress().then((res) => {
        // @ts-ignored
        addressList.value = res.data.result
      })
      refreshOrderInfo();
    })

    const toSelectAddress = (value: AddressType) => {
      for (let valueKey in value) {
        // @ts-ignored
        if (value[valueKey] == null || value[valueKey].trim() == '') continue;
        // @ts-ignored
        if (addressInfo[valueKey] == undefined || addressInfo[valueKey] == null) continue;
        else {
          // @ts-ignored
          addressInfo[valueKey] = value[valueKey].toString().trim()
        }
      }
      state.showSelectAddressModal = false;
    }

    const toSubmitOrder = () => {
      Modal.confirm({
        title: 'Confirm to submit order？',
        onOk() {
          postOrder({...addressInfo, ...goodInfo.value}).then((res) => {
            router.push({
              path: '/user/order/' + res.data.result.id
            })
          }).catch(res => {
            notification.warning({
              message: res.data.message
            })
          })
        }
      })
    }

    return {
      toSubmitOrder,
      orderInfo,
      toSelectAddress,
      countries,
      state,
      addressList,
      addressInfo,
      showExtra,
      columns
    }
  }
})
</script>

<style scoped lang="less">


.create-order-outer-outer {
  padding: 10px 70px;

  border-radius: 10px;

  @media screen and (max-width: 1200px) {
    padding: 10px 30px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 0;
    border-radius: 0;
  }
}


.basic-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.submit-order-submit-button-outer {
  justify-content: flex-end;
  margin-top: 20px;
  @media screen and (max-width: 768px) {
    justify-content: center;
  }

  .submit-order-submit-button {

  }
}

.title-font {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 10px 0;
}

.show-max-576px {
  @media screen and (min-width: 576px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}
.show-max-768px {
  @media screen and(min-width: 769px) {
    display: none !important;
  }
}

.show-min-768px {
  @media screen and(max-width: 768px) {
    display: none !important;
  }
}
.selection {
  transition: all 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.selection:hover {
  background-color: rgb(230, 247, 255) !important;
}

.is-selection {
  background-color: rgb(230, 247, 255);
}

.submit-order-address-list-outer {
  .submit-order-address-outer {
    //border-top: 1px solid #dad9d9;

    box-sizing: border-box;
    height: 100%;

    padding: 5px;

    .submit-order-address {
      background-color: #f5f5f5;
      border-radius: 10px;
      padding: 5px;
      box-sizing: border-box;
      height: 100%;
    }
  }

  .submit-order-address-outer:last-child {
    //border-bottom: 1px solid #dad9d9;

  }

  padding-bottom: 3px;
}


.form-item-outer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 3px 10px 3px;
  //flex-direction: row;
  flex-direction: column;


  .form-item-label {
    display: flex;
    align-items: center;
    margin-right: 10px;
    font-size: 14px;
    line-height: 22px;
    justify-content: flex-start;
  }

  .form-item-input {
    flex: 1 1 auto;
  }
}

.create-order-action-outer{
  padding: 0 5px;
  box-sizing: border-box;
}
</style>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);;
    max-height: calc(100vh);
    overflow-y: hidden;
  }

  .ant-modal-body {
    flex: 1;
    overflow-y: scroll;
    padding: 20px 10px;
  }
}
</style>
